<template>
  <div class="container">
    <n-button @click="back">返回</n-button>
    <n-h1>{{blogInfo.title}}</n-h1>
    <div class="content">
      <div v-html="blogInfo.content"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted, computed } from 'vue'
import { AdminStore } from '../stores/AdminStore'  //1.引入
import { useRouter, useRoute } from 'vue-router'; //路由

const router = useRouter()  //这是做路由跳转的
const route = useRoute()  //这是获取当前路由信息，和当前路由传参的
const dialog = inject("dialog")
const axios = inject("axiosTool")  //axiosTool 是我provide定义的名字
const blogInfo = ref({})


onMounted(() => {
  loadBlog()
})

const loadBlog = async () => {
  let id = route.query.id;
  let res = await axios.get("/blog/detail?id=" + id)
  blogInfo.value = res.data.rows[0]

}

const back = () => {
  router.push("/")
}
</script>


<style>
.content img {
  max-width: 100% !important;
}
</style>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0px auto;
  text-align: center;
}
</style>